/*
 * @Author: HuangYue
 * @Date: 2022-05-08 22:12:20
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-09 15:49:22
 * @FilePath: /graduation/src/components/DeviceDetail/DeviceVisualization/components/Liquid/index.jsx
 * @Description:
 */
import React, { useRef, useEffect } from 'react';
import { Liquid } from '@ant-design/plots';

const DemoLiquid = ({ data }) => {
  const graphRef = useRef(null);
  const config = {
    height: 200,
    percent: data,
    outline: {
      border: 4,
      distance: 8,
    },
    wave: {
      length: 128,
    },
    color: () => {
      const percent = data;
      if (percent >= 0.2 && percent < 0.6) return '#a8ddb5';
      if (percent >= 0.6 && percent < 0.8) return '#f58220';
      return '#ed1941';
    },
    statistic: {
      title: {
        offsetY: 32,
        formatter: ({ percent }) => {
          if (percent >= 0.2 && percent < 0.6) return '设备状态优';
          if (percent >= 0.6 && percent < 0.8) return '设备状态良好';
          return '设备状态差';
        },
        style: ({ percent }) => {
          return {
            fontSize: '20px',
            lineHeight: 1,
            color: '#4B535E',
          };
        },
      },
      content: {
        offsetY: 36,
        style: {
          fontSize: '12px',
          color: '#4B535E',
        },
        formatter: () => '',
      },
    },
    onReady: (plot) => {
      graphRef.current = plot;
    },
  };

  return <Liquid {...config} />;
};

export default DemoLiquid;
